/**
 * Customize default theme styling by overriding CSS variables:
 * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
 */

/**
 * Colors
 * -------------------------------------------------------------------------- */

 :root {
  --vp-c-indigo-1: #1677FF;
  --vp-c-indigo-2: #3086ff;
  --vp-c-indigo-3: #4995ff;

  --vp-c-text-1: rgb(40, 42, 43);
  --vp-c-text-2: rgba(40, 42, 43, .72);
  --vp-c-text-3: rgba(40, 42, 43, .52);

  --vp-c-indigo-soft: rgb(22, 119, 255, 0.14);

  --custom-red: #F92855;
  --custom-green: #2DC08E;

  --vp-code-color: #476582;

  --vp-nav-height: 60px;

  --vp-button-brand-border: var(--vp-c-indigo-2);
  --vp-button-brand-bg: var(--vp-c-indigo-1);
  --vp-button-brand-hover-border: var(--vp-c-indigo-2);
  --vp-button-brand-hover-bg: var(--vp-c-indigo-2);
  --vp-button-brand-active-border: var(--vp-c-indigo-2);
  --vp-button-brand-active-bg: var(--vp-button-brand-bg);

  --vp-custom-block-font-size: 13px;
  --vp-custom-block-code-font-size: 12px;
  --vp-code-line-height: 1.6;
  --vp-code-font-size: 1em;

  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: -webkit-linear-gradient(
    145deg,
    var(--custom-green) 26%,
    var(--custom-red)
  );

  --vp-home-hero-image-background-image: linear-gradient(
    -45deg,
    rgba(45, 192, 142, 0.3),
    rgba(249, 40, 85, 0.3)
  );
  --vp-home-hero-image-filter: blur(40px);
}

.dark {
  --vp-c-text-1: rgb(240, 242, 243);
  --vp-c-text-2: rgba(240, 242, 243, .72);
  --vp-c-text-3: rgba(240, 242, 243, .52);;
  --vp-code-color: #c9def1;
  --vp-c-bg: #121212;
  --vp-c-divider: #232525;
  --vp-c-gutter: var(--vp-c-divider);
}

body {
  font-size: 14px;
}

@media (min-width: 640px) {
  :root {
    --vp-home-hero-image-filter: blur(60px);
  }
}

@media (min-width: 960px) {
  :root {
    --vp-home-hero-image-filter: blur(80px);
  }
}

.vp-doc p a img {
  display: inline;
  vertical-align: middle;
}

.vp-code-group .tabs label {
  display: flex;
  align-items: center;
}

.vp-code-group .tabs label svg {
  margin-right: 8px;
}

.home-section {
  border-top: 1px solid var(--vp-c-gutter);
  padding: 60px 24px;
  text-align: center;
}

.home-section .home-section-content {
  margin: 0 auto;
  max-width: 1152px;
}

.sample-chart + .vp-code-group {
  margin-top: 0;
}

.sample-chart + .vp-code-group .tabs {
  background-color: transparent;
  border: solid 1px var(--vp-c-divider);
  border-bottom: none;
  border-top-style: dashed;
  border-radius: 0;
  margin-left: 0;
  margin-right: 0;
}
.sample-chart + .vp-code-group div[class*='language-'] {
  background-color: transparent;
  border: solid 1px var(--vp-c-divider);
  border-top: none;
  margin-left: 0;
  margin-right: 0;
}

@media (min-width: 640px) {
  .home-section {
    padding: 60px 48px
  }
}

@media (min-width: 960px) {
  .home-section{
    padding: 60px 64px
  }
}

